{% extends "_layout.html" %}

{# 样式代码 #}
{% block style %}
    <link href="css/index.css" rel="stylesheet" >
    <link href="css/demo.css" rel="stylesheet" >
    <link href="css/animate.min.css" rel="stylesheet" >
{% endblock %}

{# body代码#}
{% block body %}
    <!--container start-->
	<div class="container_new" id="new">
		<!--倒计时效果-->
		<div class="new_online">
			<img src="{{ ctx.app.config.staticUrl }}/images/new_01.png"/>
		</div>
		<div class="countdown countdown-container container">
	        <div class="clock row">
	            <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
	                <div class="wrap">
	                    <div class="inner">
	                        <div id="canvas-days" class="clock-canvas"></div>			
	                        <div class="text">
	                            <p class="val">5</p>
	                            <p class="type-days type-time">DAYS</p>
	                        </div><!-- /.text -->
	                    </div><!-- /.inner -->
	                </div><!-- /.wrap -->
	            </div><!-- /.clock-item -->
	
	            <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
	                <div class="wrap">
	                    <div class="inner">
	                        <div id="canvas-hours" class="clock-canvas"></div>
	
	                        <div class="text">
	                            <p class="val">8</p>
	                            <p class="type-hours type-time">HOURS</p>
	                        </div><!-- /.text -->
	                    </div><!-- /.inner -->
	                </div><!-- /.wrap -->
	            </div><!-- /.clock-item -->
	
	            <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
	                <div class="wrap">
	                    <div class="inner">
	                        <div id="canvas-minutes" class="clock-canvas"></div>
	                        <div class="text">
	                            <p class="val">6</p>
	                            <p class="type-minutes type-time">MINUTES</p>
	                        </div><!-- /.text -->
	                    </div><!-- /.inner -->
	                </div><!-- /.wrap -->
	            </div><!-- /.clock-item -->
	
	            <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
	                <div class="wrap">
	                    <div class="inner">
	                        <div id="canvas-seconds" class="clock-canvas"></div>
	                        <div class="text">
	                            <p class="val">7</p>
	                            <p class="type-seconds type-time">SECONDS</p>
	                        </div><!-- /.text -->
	                    </div><!-- /.inner -->
	                </div><!-- /.wrap -->
	            </div><!-- /.clock-item -->
	        </div><!-- /.clock -->
	    </div><!-- /.countdown-wrapper -->
		<!--倒计时效果结束-->
		<div class="new_con">
			<ul class="new_list">
				<li style="background: url({{ ctx.app.config.staticUrl }}/images/1.jpg) no-repeat center;">
					<div class="new_info">
						<h1 class="wow fadeInUpBig" data-wow-duration="1.2s" data-wow-delay="0.2s" data-wow-offset="400">「马蹄松茸炒蘑菇」</h1>
						<p class="wow fadeInUpBig" data-wow-duration="1.2s" data-wow-delay="0.2s" data-wow-offset="300">食艺道呈递给您的不是一场饕餮盛宴，而是让您感受到我们对于每一份餐品的匠心制作，所以每周我们会统计餐品的订购情况，排列出最佳餐品排行榜，在今后的研发设计中，择善而长，推陈出新。</p>
					</div>
					<div class="new_bg wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.5s" data-wow-offset="600"></div>
				</li>
				<li style="background: url({{ ctx.app.config.staticUrl }}/images/2.jpg) no-repeat center;">
					<div class="new_info">
						<h1 class="wow fadeInUpBig" data-wow-duration="1.2s" data-wow-delay="0.2s" data-wow-offset="400">「酱烤东星斑」</h1>
						<p class="wow fadeInUpBig" data-wow-duration="1.2s" data-wow-delay="0.2s" data-wow-offset="300">食艺道呈递给您的不是一场饕餮盛宴，而是让您感受到我们对于每一份餐品的匠心制作，所以每周我们会统计餐品的订购情况，排列出最佳餐品排行榜，在今后的研发设计中，择善而长，推陈出新。</p>
					</div>
					<div class="new_bg wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.5s" data-wow-offset="600"></div>
				</li>
				<li style="background: url({{ ctx.app.config.staticUrl }}/images/3.jpg) no-repeat center;">
					<div class="new_info">
						<h1 class="wow fadeInUpBig" data-wow-duration="1.2s" data-wow-delay="0.2s" data-wow-offset="400">「清爽夏威夷」</h1>
						<p class="wow fadeInUpBig" data-wow-duration="1.2s" data-wow-delay="0.2s" data-wow-offset="300">食艺道呈递给您的不是一场饕餮盛宴，而是让您感受到我们对于每一份餐品的匠心制作，所以每周我们会统计餐品的订购情况，排列出最佳餐品排行榜，在今后的研发设计中，择善而长，推陈出新。</p>
					</div>
					<div class="new_bg wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.5s" data-wow-offset="600"></div>	
				</li>
			</ul>
			<div class="new_bot">
				<div class="make_btn fl">
					<a href="javascript:void(0);" onclick="newProp(this,id);" class="trs">立即预约</a>
				</div>
				<div class="make_btn fr">
					<a href="javascript:void(0);" onclick="" class="trs">立即分享</a>
				</div>
			</div>
		</div>	
		<!--消息弹出框-->
		<div class="new_prop">
			<div class="new_logo">
				<img src="img/new_logo.png"/>
			</div>
			<div class="new_prop_txt" style="margin-top: 158px;">尊敬的顾客，您已成功预订x月X日的菜品，</div>
			<div class="new_prop_txt" style="margin-top: 29px;">是否需要开启提醒功能？</div>
			<div class="new_btn sure">是</div>
			<div class="new_btn none">否</div>
			<div class="error_btn">
				<img src="img/error.png" />
			</div>
		</div>
		<div class="new_prop_bg"></div>
	</div>
	<!--container end-->
{% endblock %}
{#js代码#}
{% block js %}
    <script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/wow.min.js"></script> 
	<script type="text/javascript" src="js/kinetic.js"></script>
    <script type="text/javascript" src="js/jquery.final-countdown.min.js"></script>
    <script type="text/javascript">
    	var wow = new WOW({
		    boxClass: 'wow',
		    animateClass: 'animated'
		});
		wow.init();
        $('document').ready(function () {
            'use strict';
            var str = '2017-05-15 12:00:00';
            var startTime = Date.parse(new Date(str));
            startTime = startTime / 1000; 
            console.log(startTime);
			var now = new Date();
            var currentTime = Date.parse(new Date());
            currentTime = currentTime / 1000;
            console.log(currentTime);
            var end = "2017-05-18 12:00:00";
            var endTime = Date.parse(new Date(end));
            endTime = endTime / 1000;
            console.log(endTime);      
            $('.countdown').final_countdown({
                'start': startTime,
                'end': endTime,
                'now': currentTime
            });
        });
        function formatDate(now) { 
			var year=now.getFullYear(); 
			var month=now.getMonth()+1; 
			var date=now.getDate(); 
			var hour=now.getHours(); 
			var minute=now.getMinutes(); 
			var second=now.getSeconds(); 
			return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
		} 
        var d = new Date(1493596800000);
        console.log(formatDate(d));  
    </script>
{% endblock %}